<!--
 * @Descripttion: 分页组件
 * @version: 
 * @Author: Bruce
 * @Date: 2020-11-03 14:32:44
 * @LastEditors: Bruce
 * @LastEditTime: 2020-11-03 18:13:41
-->

<template>
	<div class="page">
		<el-pagination 
			background 
			@current-change="handleCurrentChange" 
			:current-page="currentPage" 
			:page-size="pageSize" 
			:total="total" 
			layout="total, prev, pager, next, jumper"
		>
		</el-pagination>
	</div>
</template>

<script>
	export default {
		props: {
			currentPage: { //当前第几页
				type: Number,
				default: 1
			},
			pageSize: { //显示页数
				type: Number,
				default: 5
			},
			total: { //总条数
				type: Number,
			}
		},
		methods: {
			handleCurrentChange(currentPage) {
				//切换第几页
				this.$emit("update:currentPage", currentPage);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		padding: 20px 0;
		display: flex;
		justify-content: center;
	}
</style>

<!-- 
共7页

每页5条数据

2页 -->